<template>
  <div v-drag>
    <div class="mask"  @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>取消订单</p>
        <i  @click="closePopup(false)"></i>
      </div>

      <template>
        <div class="box_body" >
        <div class="line">
          <span class="lab">备注信息：</span>
          <div>
            <el-input type="text" placeholder="请输入备注信息" v-model.trim="remark"></el-input>
          </div>
        </div>
        </div>
      </template>

      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {unpaidCancel} from "@/api/data/user/order";
export default {
  props:['orderNo'],
  data(){
    return {
      loading:false,
      remark:'',
    }
  },
  mounted() {
  },
  methods:{
    confirmEdit(){
      let that = this;
      that.$confirm('确定取消'+that.orderNo+'订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((e) => {
        that.sendMark();
      }).catch(() => {
      });
    },

    sendMark() {
      let that = this;
      let data = {orderNo:that.orderNo,type:1,remark:that.remark}
      that.loading = true;
      unpaidCancel(data).then(()=>{
          that.successTip();
        }).catch(() => {
        });
      that.loading = false;
    },

    successTip(){
      this.closePopup(true);
      this.$message.success({
        message:'取消成功！',
        duration:1500
      });
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.type_box {
  display: flex;
  flex-wrap: wrap;
}

/*.type_box {*/
/*  width:400px;*/
/*}*/
.type_box p {
  width:40%;
  margin-top: 10px;
}
</style>
